<template>
  <div>
    <!-- 轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swipe :carouselImg="swiperArr"></swipe>
        </div>
      </div>
    </div>

    <!-- 价格 -->
    <div class="mui-card">
      <div class="mui-card-header">
        <h3>fjkdfjlsd</h3>
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            <span>市场价:￥4561</span>
            <del>销售价价:￥4561</del>
          </p>购买数量
          <van-stepper v-model="value" input-width="40px" button-size="32px" margin="0"/>
        </div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）</div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import swipe from "../../subcomponent/swipe.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      swiperArr: [],
      value: ""
    };
  },
  created() {
    this.getSwiper();
  },
  methods: {
    getSwiper() {
      this.$http
        .get("http://www.liulongbin.top:3005/api/getthumimages/" + this.id)
        .then(res => {
          if (res.data.status === 0) {
            // 由于 轮播图的组件 封装的是 img 属性而不是 src 属性，所以需要在原有的基础上添加 img 属性进行遍历
            res.data.message.forEach(function(item, i) {
              item.img = item.src;
            });
            this.swiperArr = res.data.message;
            console.log(res.data.message);
          }
        })
        .catch(function(error) {
          // handle error
          Toast("获取商品列表失败");
        });
    }
  },
  components: {
    swipe
  }
};
</script>
<style lang="less" scoped>
  .van-stepper{
    display: inline-block
  }
  .van-stepper_input{
        margin-bottom: 50px;
  }
</style>
